<template>
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
      Button 按钮
    </h1>

    <div class="space-y-8">
      <section>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          基础用法
        </h2>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow space-y-4">
          <div class="flex gap-4">
            <Button>默认按钮</Button>
            <Button variant="secondary">次要按钮</Button>
            <Button variant="outline">描边按钮</Button>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          不同尺寸
        </h2>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow space-y-4">
          <div class="flex items-center gap-4">
            <Button size="sm">小按钮</Button>
            <Button size="md">中按钮</Button>
            <Button size="lg">大按钮</Button>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          禁用状态
        </h2>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow space-y-4">
          <div class="flex gap-4">
            <Button disabled>禁用按钮</Button>
            <Button variant="secondary" disabled>禁用次要按钮</Button>
            <Button variant="outline" disabled>禁用描边按钮</Button>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          代码示例
        </h2>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
          <pre
            class="text-sm text-gray-800 dark:text-gray-200"
          ><code>&lt;Button&gt;默认按钮&lt;/Button&gt;
&lt;Button variant="secondary"&gt;次要按钮&lt;/Button&gt;
&lt;Button variant="outline"&gt;描边按钮&lt;/Button&gt;

&lt;Button size="sm"&gt;小按钮&lt;/Button&gt;
&lt;Button size="md"&gt;中按钮&lt;/Button&gt;
&lt;Button size="lg"&gt;大按钮&lt;/Button&gt;

&lt;Button disabled&gt;禁用按钮&lt;/Button&gt;</code></pre>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from "~/components/ui/Button.vue";
</script>
